<template>
  <div class="bar-echart">
    <!-- <div>{{ this.barData.map((item) => item.RealmName) }}</div>
    <div>{{ this.barData.map((item) => item.EntAmount) }}</div> -->
    <div id="chartId" style="height: 850px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([GridComponent, BarChart, CanvasRenderer]);
export default {
  name: "LineEchart2",
  data() {
    return {
      barData: [],
    };
  },
  // props: {
  //   barData: {
  //     type: Array,
  //   },
  // },
  methods: {
    async getData() {
      let resourt;
      await this.$axios({
        url: "/Statist/GetZscqTotalByYear",
        method: "post",
        data: {
          // province:"湖南省",
          // city: this.$cookies.get("city")
          //   ? this.$cookies.get("city") + "市"
          //   : "",
          // area: 0,
          // year: 1,
          // userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          //console.log(res.data.data);
          resourt = res.data.data;
        })
        .catch((err) => {
          //console.log(err);
        });
      return resourt;
    },
    getMapInfo() {
      this.getData().then((res) => {
        // console.log(res);
        let arr1 = res[0].EntCopyright.split("|")[1].split(",").splice(2);
        let arr2 = res[0].EntPatent.split("|")[1].split(",").splice(15);
        let arr3 = res[0].EntTrademark.split("|")[1].split(",").splice(20);
        // console.log(arr1, arr2, arr3);
        this.createChart(arr1,arr2,arr3);
      });
      // debugger
      // this.buildMap(res); //有数据格式要求，下文细说
      // this.buildMap(res.data); //有数据格式要求，下文细说
    },
    createChart(barData1,barData2,barData3) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("chartId"));
      // 指定图表的配置项和数据

      let option = {
        title: {
          text: "知识产权年增长",
          x: "center",
          top: 100,
        },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["企业数", "企业产值",],
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: [
            "2000",
            "2001",
            "2002",
            "2003",
            "2004",
            "2005",
            "2006",
            "2007",
            "2008",
            "2009",
            "2010",
            "2011",
            "2012",
            "2013",
            "2014",
            "2015",
            "2016",
            "2017",
            "2018",
            "2019",
            "2020",
            "2021",
            "2022",
          ],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          y: 200,
          y2: 150,
        },
        series: [
          {
            name: "软著",
            data: barData1,
            type: "line",
          },
          {
            name: "专利",
            data: barData2,
            type: "line",
          },
          {
            name: "商标",
            data: barData3,
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.getMapInfo();
  },
};
</script>

<style scoped>
.bar-echart {
  width: 100%;
  height: 100%;
}
</style>